<!DOCTYPE html>  
<html lang="en">  
 <head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">     
    <title>CSS flex布局</title>  
    <style>  
        h3 {  
            width: 500px;  
            margin: 20px auto;  
        }  
        section {  
            width: 500px;  
            height: 200px;  
            margin: 20px auto;  
            padding: 10px;    
            border: 1px solid black;  
            display: flex;  
        }  
        .child {  
            width: 100px;  
            height: 100px;  
            border: 1px solid red;  
            margin: 10px;  
        }  
        #parent1 {  
            /* 主轴 */  
            justify-content: start;  
            /* 侧轴 */  
            align-items: start;  
        }  
        #parent2 {  
            justify-content: center;  
            align-items: center;  
        }  
        #parent3 {  
            justify-content: end;  
            align-items: end;  
        }  
    </style>  
</head>  
<body>  
    <h3>start</h3>  
    <section id="parent1">  
        <div class="child">content</div>  
        <div class="child">content</div>  
        <div class="child">content</div>  
    </section>  
    <h3>center</h3>  
    <section id="parent2">  
        <div class="child">content</div>  
        <div class="child">content</div>  
        <div class="child">content</div>  
    </section>  
    <h3>end</h3>  
    <section id="parent3">  
        <div class="child">content</div>  
        <div class="child">content</div>  
        <div class="child">content</div>  
    </section>  
</body>  
</html>